<template>
  <view class="bookshelf-container">
    <!-- 背景图片开始   -->
    <img class="bg-pic" src="/static/images/bookshelf_bg.jpg" alt="" />
    <!-- 背景图片结束 -->
    <!-- 头部搜索开始 -->
    <view class="header">
      <view class="search" @click="onToSearchPage">
        <uni-search-bar radius="999" bgColor="#e5e5e5" cancelButton="none" placeholder="搜索"> </uni-search-bar>
      </view>
      <view class="right-icon" @click="onToSearchPage">
        <button class="mini-btn" type="primary" size="mini">搜索</button>
      </view>
    </view>
    <!-- 头部搜索结束 -->

    <!-- 书架开始 -->
    <view class="bookshelf-content">
      <!-- 书架分类开始 -->
      <view class="book-category">
        <scroll-view class="scroll" scroll-y="true">
          <view class="category-item" :class="{ active: item.id === 0 }" v-for="item in categoryList" :key="item.id">
            {{ item.name }}
          </view>
        </scroll-view>
      </view>

      <!-- 书架分类结束 -->
      <!-- 书架分类对应书籍开始 -->

      <view class="book-content">
        <scroll-view class="scroll" scroll-y="true">
          <view class="book-item">
            <view class="category"> 文学历史 </view>
            <view class="book-list">
              <view class="book" v-for="item in 10" :key="item">
                <view class="book-img">
                  <image class="book-pic" src="@/static/category/成长励志.jpg" mode="widthFix" lazy-load="true" />
                </view>
                <view class="book-desc">
                  <view class="book-title"> 时代光华v北京的咖啡馆是否是举报VS的环境v毕竟当时法国 </view>
                  <view class="book-price">
                    <text> ￥ </text>
                    <text class="price">{{ 16.66 }} </text>
                    <text> 元 </text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="book-item">
            <view class="category"> 金融科技 </view>
            <view class="book-list">
              <view class="book" v-for="item in 10" :key="item">
                <view class="book-img">
                  <image class="book-pic" src="@/static/category/成长励志.jpg" mode="widthFix" lazy-load="true" />
                </view>
                <view class="book-desc">
                  <view class="book-title"> 时代光华sgdbhjsbvjdsbvjsbhv北京的咖啡馆v毕竟当时法国 </view>
                  <view class="book-price">
                    <text> ￥ </text>
                    <text class="price">{{ 16.66 }} </text>
                    <text> 元 </text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view style="padding-top: 10rpx" class="no-more"> —— 只有这么多了 —— </view>
        </scroll-view>
      </view>

      <!-- 书架对应分类书籍结束 -->
    </view>
    <!-- 书架结束 -->

    <!-- 加载动画开始 -->
    <Transition name="toast">
      <Toast v-if="globalLoading"></Toast>
    </Transition>
    <!-- 加载动画结束 -->
  </view>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapState } from 'vuex'

export default Vue.extend({
  data() {
    return {
      title: 'Hello',
      categoryList: [
        {
          id: 0,
          name: '文学历史'
        },
        {
          id: 1,
          name: '文学历史'
        },
        {
          id: 2,
          name: '文学历史'
        },
        {
          id: 3,
          name: '文学历史'
        },
        {
          id: 4,
          name: '文学历史'
        },
        {
          id: 5,
          name: '文学历史'
        },
        {
          id: 6,
          name: '文学历史'
        },
        {
          id: 7,
          name: '文学历史'
        }
      ]
    }
  },
  computed: {
    ...mapState('user', ['globalLoading'])
  },
  onLoad() {},
  methods: {
    // 前往搜索界面
    onToSearchPage() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    }
  }
})
</script>

<style lang="scss" scoped>
.bookshelf-container {
  height: 100vh;
  position: relative;
  overflow: hidden;
  font-family: 'aliregular';

  .bg-pic {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.5;
    z-index: -1;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100vw;
    border-bottom: 2rpx solid $uni-border-light-color;
    padding: 13rpx 20rpx;
    background-color: $uni-text-color-inverse;

    .search {
      flex: 1;
    }
    ::v-deep .uni-searchbar {
      padding: 0;
      padding-right: 10rpx;

      .uni-searchbar__box {
        justify-content: flex-start;
        padding: 0;
        height: 60rpx;
      }
    }
    button[type='primary'] {
      background-color: $uni-theme-color;
      border-radius: 999rpx;
    }
  }

  .bookshelf-content {
    display: flex;

    .book-category {
      flex-shrink: 0;
      background-color: rgba(255, 255, 255, 0.5);

      .category-item {
        display: flex;
        padding: 20rpx;
        align-items: center;
        justify-content: center;
        font-size: 30rpx;
        color: $uni-theme-light-color;
        font-weight: 700;
      }

      .active {
        position: relative;
        background-color: $uni-theme-4-color;
        color: $uni-theme-color;

        &::after {
          position: absolute;
          content: '';
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          background-color: $uni-theme-color;
          height: 80%;
          width: 6rpx;
        }
      }
    }

    .book-content {
      flex: 1;

      .scroll {
        height: calc(100vh - 88rpx);
      }

      .category {
        padding: 20rpx;
        font-weight: 700;
        font-size: 26rpx;
        color: $uni-theme-color;
        background-color: rgba(255, 255, 255, 0.5);
      }

      .book-list {
        padding: 10rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .book {
          width: calc(50% - 10rpx);
          background-color: rgba(255, 255, 255, 0.7);
          border-radius: 10rpx;
          overflow: hidden;
          padding: 10rpx;
          margin-top: 20rpx;

          &:nth-of-type(1) {
            margin-top: 0;
          }
          &:nth-of-type(2) {
            margin-top: 0;
          }

          .book-img {
            width: 100%;

            .book-pic {
              width: 100%;
            }
          }
          .book-title {
            font-size: 26rpx;
            color: $uni-theme-light-color;
            font-weight: 600;
            line-height: 34rpx;
            overflow: hidden;
            text-overflow: ellipsis; /*显示为......*/
            -webkit-line-clamp: 2; /*显示为两行，在第二行中显示为.......*/
            display: -webkit-box;
            -webkit-box-orient: vertical;
          }

          .book-price {
            padding: 10rpx 0;
            color: red;
            font-size: 20rpx;

            .price {
              padding: 0 5rpx;
              font-size: 26rpx;
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
